<template>
	<view class="projectDetails">
		<view class="xiangqingtupian">
			<swiper class="swiper" @change="play($event)" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			 :duration="duration">
				<swiper-item v-for="(item,index) in datas.num_url" :key="item.id">
					<view class="swiper-item uni-bg-red">
						<image :src="item" mode="scaleToFill" style="width: 750rpx; height: 400rpx;"></image>
					</view>
				</swiper-item>
			</swiper>
			<text class="shulian">
				<text>{{imgNum}} / {{datas.num_url.length}}</text>
			</text>
		</view>

		<view class="contents">
			<view class="price">
				<text>￥{{datas.price}}</text>
				<text>
					预约数：<text class="yuyue">{{datas.sub_num}}</text>
				</text>
			</view>

			<view class="title">
				<text>{{datas.items_title}}</text>
			</view>

			<view class="neme">
				<view class="mingcheng">
					<text>门店</text>
					<text>{{datas.service_title}}</text>
				</view>
				<view @click="make" class="tels">
					<image src="/static/image/qita/tel.png" mode="scaleToFill" style="width: 20rpx; height: 27rpx;"></image>
				</view>
			</view>

			<view class="address">
				<view class="dizhi">
					<text>地址</text>
					<text>{{datas.area_title}}{{datas.address_title}}</text>
				</view>
				<view class="juli">
					<image src="/static/image/qita/positions.png" mode="scaleToFill" style="width: 16rpx; height: 21rpx;"></image>
					<text>{{juli}} m</text>
				</view>
			</view>

			<view class="details">
				<text>项目详情</text>
				<text>{{datas.content}}</text>
			</view>

		</view>

		<view class="dibuanniu">
			<text @click="jumpClinicDetails">进入门店</text>
			<text @click="jumpMyappointment">免费预约</text>
		</view>
		<e-picker-plus mode="YMDhms" ref="picker" @confirm="confirm" />
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			this.juli = options.juli
			console.log(this.juli);
			this.ids = options.id;
			this.getList(options.id);
		},
		data() {
			return {
				datas: null,
				juli: null,
				// 门店Id号
				ids: null,
				// 门店联系电话
				tel: null,
				// 轮播图片的功能吧
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				// 当前图片的数值
				imgNum: 1,
				// 免费预约时间
				arrive_time: null
			};
		},
		methods: {
			play(event) {
				this.imgNum = event.detail.current + 1;
			},
			async jumpClinicDetails() {
				uni.navigateTo({
					url: `../clinicDetails/clinicDetails?ids=${this.datas.service_id}&juli=${this.juli}`
				})
			},
			async confirm(e) {
				this.arrive_time = e.detail.value;
				// 页面跳转了

				let openids = this.$store.state.userinfo.openid;
				let Items = await this.$myrequest({
					url: `Subscribe/addSubscribe`,
					method: "POST",
					data: {
						service_id: this.datas.service_id,
						item_id: this.datas.items_id,
						openid: openids,
						arrive_time: this.arrive_time
					}
				});
				let urls = `../appointmentSsuccessful/appointmentSsuccessful?id=${this.datas.service_id}`;
				if (Items.data.code == 201) {
					urls =
						`../myappointment/myappointment?page=1&datas=${encodeURIComponent(JSON.stringify(this.datas))}&ids=${this.datas.service_id}&names=${this.datas.service_title}`;
				};
				this.makeappointment = false;
				uni.navigateTo({
					url: urls,
				})



			},
			async jumpMyappointment() {
				// 显示免费预约时间
				this.$refs.picker.show();
				if (this.$store.state.userinfo == null) {
					uni.switchTab({
						url: "../tab/my/my"
					});
					return;
				};
			},
			async getList(id) {
				let lists = await this.$myrequest({
					url: `Pagelist/getDetails?id=${id}`,
				});
				console.log(lists);
				this.datas = lists.data.data;
				this.tel = lists.data.data.contact_phone;
			},
			async make() {
				uni.makePhoneCall({
					phoneNumber: this.tel
				});
			}
		},
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
	}

	.xiangqingtupian {
		height: 400rpx;
		position: relative;

		swiper {
			height: 400rpx;
		}

		.shulian {
			position: absolute;
			bottom: 20rpx;
			right: 35rpx;
			@include shuipingchuijuzhong;
			width: 60rpx;
			height: 40rpx;
			border-radius: 50rpx;
			background-color: #928982;

			text {
				font-size: 20rpx;
				color: #FFFFFF;
				@include shuipingchuijuzhong;
			}
		}
	}

	.contents {
		padding: 40rpx 30rpx 0;

		.price {
			width: 100%;
			@include chuizhilianduan;

			>text {
				font-size: 24rpx;

				&:first-of-type {
					color: #FF3A25;
					font-size: 46rpx;
				}
			}

			.yuyue {
				color: #2DD1BC;
			}
		}

		.title {
			>text {
				font-size: 30rpx;
				color: #000000;
				font-weight: 400;
			}

			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #DBDBDB;
		}
	}

	.neme {
		@include chuizhilianduan;
		margin-top: 40rpx;

		>text {
			&:first-of-type {
				font-size: 26rpx;
			}
		}

		.tels {
			display: inline-block;
			width: 200rpx;
			text-align: center;
			border-left: 1rpx solid #CCCCCC;
		}
	}

	.dibuanniu {
		position: fixed;
		width: 100vw;
		bottom: 30rpx;
		left: 0;
		@include shuipingchuijuzhong;

		text {
			font-size: 30rpx;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			@include shuipingchuijuzhong;

			&:first-of-type {
				width: 218rpx;
				height: 80rpx;
				background: rgba(126, 190, 255, 1);
				border-radius: 40px;
			}

			&:last-of-type {
				margin-left: 20rpx;
				width: 450rpx;
				height: 80rpx;
				background: linear-gradient(90deg, rgba(96, 232, 205, 1), rgba(45, 209, 188, 1));
				border-radius: 40px;
			}
		}
	}

	.mingcheng,
	.dizhi {
		text {
			&:first-of-type {
				font-size: 26rpx;
				margin-right: 20rpx;
				color: #808080;
			}
		}
	}

	.address {
		margin-top: 30rpx;
		@include chuizhilianduan;

		.juli {
			display: inline-block;
			width: 200rpx;
			text-align: right;
			border-left: 1rpx solid #CCCCCC;
		}

		padding-bottom: 40rpx;
		border-bottom: 1rpx solid #CCCCCC;
	}

	.dizhi {}

	.juli {
		>text {
			margin-left: 25rpx;
		}
	}

	.details {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		margin-top: 30rpx;

		>text {
			&:first-of-type {
				font-size: 28rpx;
				display: inline-block;
				width: 100%;
				color: #000000;
			}

			&:last-of-type {
				margin-top: 30rpx;
				color: #808080;
				font-size: 26rpx;
			}
		}
	}
</style>
